<template>
  <div>
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" @change="onchange">
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="待确认"></van-tab>
      <van-tab title="待发货"></van-tab>
      <van-tab title="已发货"></van-tab>
      <van-tab title="交易完成"></van-tab>
    </van-tabs>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="20"
    >
      <van-cell v-for="item in list" :key="item.orderId">
        <div class="title">
          <div>订单时间：{{ item.createTime }}</div>
          <div>{{ item.orderStatusString }}</div>
        </div>
        <van-card
          v-for="val in item.newBeeMallOrderItemVOS"
          :key="val.goodsId"
          :num="val.goodsCount"
          :price="val.sellingPrice"
          :title="val.goodsName"
          :thumb="val.goodsCoverImg"
        />
      </van-cell>
    </van-list>
  </div>
</template>

<script>
//newBeeMallOrderItemVOS
//APIgetOrderList
import { APIgetOrderList } from "@/http/index.js";
import Vue from "vue";
import { Tab, Tabs, List, Cell, Card } from "vant";

Vue.use(Tab).use(Tabs).use(List).use(Cell).use(Card);

export default {
  name: "MyOrder",
  props: [],
  data() {
    return {
      active: 0,
      list: [],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      APIgetOrderList(
        this.page++,
        this.active == 0 ? "" : this.active - 1
      ).then((res) => {
        if (res.resultCode == 200) {
          if (res.data.list.length == 0) {
            this.finished = true;
          }
          this.list = this.list.concat(res.data.list);
          // 加载状态结束
          this.loading = false;
        }
      });
    },
    onchange(val) {
      //console.log(val);
      this.page = 1;
      this.list = [];
      this.finished = false;
      this.onLoad();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.title {
  display: flex;
  justify-content: space-between;
}
</style>
